<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script>
        // ES6 ： ECMA script 6 ---> 2015  
        // ES6+ 

        // 一、let 声明变量 
        // ES5 声明变量 var
        // var a = 10;
        // console.log(a);

        // ES6里声明变量  let
        // let a = 10;
        // console.log(a);


        // let 的特点 。
        // 1. 相同的变量 let 不能被重复声明 。
        // var a = 10;
        // var a = 20;
        // console.log(a);
        // let a = 10;
        // let a = 20;
        // console.log(a);

        // let a = 10;
        // a = 20;
        // console.log(a);

        // 2. let 没有声明前置 ，预解析 hosting 
        // let 会把 声明的变量放在一个 暂时性死区里  Temporal Dead Zone
        // console.log(a);
        // var a  = 10;
        // console.log(a);
        // let a = 10;

        // 3. let 不会挂载在window对象上 ；
        // var a = 10;
        // console.log(window.a);
        // let a = 10;
        // console.log(window.a);


        // 4. let 支持块作用域。
        //  全局作用域  局部作用域（1.函数作用域  2. 块级作用域 大括号包裹的就是块作用域） 
        // {
        //     // 就是一个块级作用域
        //     let a = 10;
        //     console.log(a);
        // }
        // // console.log(a);
        // {
        //     let a = 20;
        //     console.log(a);

        // }

        // for(let i=0;i<3;i++){

        // }

        // {
        //     var a  = 10  ;  // var 会忽略块级作用域 ，var 不支持块级作用域
        // }
        // console.log(a);




        // 异步循环的i值问题 

        var lis = document.querySelectorAll("li");
            // console.log(lis);
            lis.forEach(function(item,key){  // callback
                item.onclick = function(){
                    console.log(key);
                }
            })
        // 循环绑定 事件
        // for (let i = 0; i < lis.length; i++) {
        //     // (function (i) {
        //         lis[i].onclick = function () {  // 会在循环完了之后 在执行这个函数，后一个i值会覆盖上一个i值；
        //             console.log(i);
        //         }
        //     // })(i)
        // }


    </script>
</body>

</html>